<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .right-list{
            width: 300px;
            box-shadow: 0 0 8px black;
            margin: 20px;
            border-radius: 6px;
        }
        .right-list .item{
            height: 40px;
            line-height: 40px;
            padding: 0px 10px;
            border-bottom: 1px solid #dedede;
            cursor: pointer;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
        }
        .my-switch .switch-btn,
        .my-switch>span {
            vertical-align: middle;
        }

        .my-switch {
            font-size: 15px;
            white-space: nowrap;
            display: inline-block;
        }

        .my-switch>span {
            display: inline-block;
            height: 2em;
            line-height: 2em;
            padding: 0px 10px;
            font-weight: bold;
        }

        .my-switch>span.active {
            color: #57a8fb;
        }

        .switch-btn {
            display: inline-block;
            width: 4em;
            height: 2em;
            border-radius: 2em;
            cursor: pointer;
            user-select: none;
            background-color: #dcdfe6;
            box-shadow: 0 0 4px #8d8d8e inset;
            transition: all 150ms ease;
        }

        .switch-btn.active {
            background-color: #57a8fb;
            box-shadow: 0 0 4px #3c75ad inset;
            ;
        }

        .switch-btn>input[type="checkbox"] {
            display: none;
        }

        .switch-btn .pot {
            display: inline-block;
            width: 2em;
            height: 2em;
            border-radius: 50%;
            transform: scale(0.76);
            background-color: white;
            box-shadow: 0 0 4px #afafaf;
            transition: all 200ms ease;
        }

        .switch-btn>input[type="checkbox"]:checked+.pot {
            margin-left: 50%;
        }
        .right-list .right-switch{
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 
        事件绑定+事件触发
         -->
        <div class="right-list">
            <div class="item" v-for="(right,i) in list">
                <span>{{ right.lable }}-{{ right.state }}</span>
                <!-- setState 是由事件回调的方法；事件回调方法如果需要获取事件源对象，可以通过替代关键字$event描述 -->
                <my-switch class="right-switch" v-on:state="setState(i,$event)"></my-switch>
            </div>
        </div>
        
    </div>
    <script type="module">
        import { createApp } from "../../assets/vue3/vue.esm-browser.js";
        import MySwitch from "./components/MySwitch.js"
        createApp({
            components: {
                MySwitch,
            },
            data() {
                return {
                    list:[
                        { lable:"允许获取定位",state:false },
                        { lable:"允许获取相册",state:false },
                        { lable:"允许获取通讯录",state:false },
                        { lable:"允许存储",state:false }
                    ]
                }
            },
            methods: {
                setState(i,e) {
                    console.log("父组件方法setState",i,e)
                    this.list[i].state = e;
                }
            },
        }).mount("#app")
    </script>
</body>
</html>